<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy+Reflect</title>
</head>
<style>
  body {
    padding: 24px;
  }

  .code-box {
    width: 600px;
    margin: auto;
  }

  .excute-box {
    width: 600px;
    margin: 12px auto;
  }

  .output-box {
    width: 600px;
    margin: auto;
  }
</style>

<body>
  <div class="code-box">
    代码
    <pre>
        function main() {
          const target = {
            message1: 'hello',
            message2: 'yaogang',
          }
          const handle1 = {
            get(target, prop, receiver) {
              if (prop === 'message1') {
                return 'world';
              }
              return Reflect.get(...arguments)
            }
          }
          const proxy1 = new Proxy(target, handle1)
          console.log(proxy1.message1); // hello
          console.log(proxy1.message2); // world
          const elLog = document.getElementById('log');
          elLog.value = proxy1.message2;
        }
        const elRun = document.getElementsByClassName('btn-run')[0];
        elRun.addEventListener('click', main)
    </pre>
  </div>
  <div class="excute-box">
    <button class="btn-run">运行</button>
  </div>
  <div class="output-box">
    <textarea id="log"></textarea>
  </div>
</body>
<script>
  function main() {
    const target = {
      message1: 'hello',
      message2: 'yaogang',
    }
    const handle1 = {
      get(target, prop, receiver) {
        if (prop === 'message1') {
          return 'world';
        }
        return Reflect.get(...arguments)
      }
    }
    const proxy1 = new Proxy(target, handle1)
    console.log(proxy1.message1); // hello
    console.log(proxy1.message2); // world
    const elLog = document.getElementById('log');
    elLog.value = proxy1.message2;
  }
  const elRun = document.getElementsByClassName('btn-run')[0];
  elRun.addEventListener('click', main)
</script>

</html>